<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>

    <!-- 表单 -->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column type="index" label="#"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="age" label="年纪"> </el-table-column>
      <el-table-column prop="tittle" label="头衔"> </el-table-column>
      <el-table-column prop="times" label="创建时间"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini">
            <router-link :to="'/details/' + scope.row.id">详情</router-link>
          </el-button>
          <el-button size="mini" type="danger" @click="open(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹框 -->
    <el-dialog
      title="添加成员"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <!-- form表单 -->
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年纪" prop="age">
          <el-input v-model.number="form.age"></el-input>
        </el-form-item>
        <el-form-item label="头衔" prop="tittle">
          <el-input v-model.number="form.tittle"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="send_data">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//导入axios封装函数
import required from "../netword/index.js"
import { times } from "../js/Times.js"

export default {
  name: "Table",
  data() {
    return {
      tableData: [],
      //控制弹框是否显示
      dialogVisible: false,
      //表单数据
      form: {
        name: "",
        age: null,
        tittle: "",
      },
      //规定表单验证
      rules: {
        name: [
          { required: true, message: "该输入框不能为空", trigger: "blur" },
        ],
        age: [
          { required: true, message: "该输入框不能为空", trigger: "blur" },
          // { min: 1, max: 99, message: "请输入正确的年龄", trigger: "blur" },
        ],
        tittle: [
          { required: true, message: "该输入框不能为空", trigger: "blur" },
        ],
      },
    }
  },
  created() {
    this.get_date()
  },
  computed: {},
  methods: {
    //请求数据
    async get_date() {
      const { data: res } = await required("/datas")

      this.tableData = res

      //初始时间
      this.tableData.forEach((item) => {
        item.times = times(item.times)
      })
    },

    //关闭时确认弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    //发送新添加的数据
    async send_data() {
      console.log(this.form)
      const { data: res } = await this.$http.post("/newdata", this.form)
      console.log(res.state)

      if (res.state != 200) {
        return this.$message.error("添加失败")
      }
      //elementui提供的成功提示消息
      this.$message.success("添加成功")

      this.get_date()

      this.dialogVisible = false
    },
    //删除对应的id上的数据
    open(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await this.$http.get("/del?id=" + val)
          console.log(res.state)
          this.get_date()
          this.$message({
            type: "success",
            message: "删除成功!",
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          })
        })
    },
    //点击取消重置 所以添加数据
    resetForm(val) {
      this.$refs[val].resetFields()

      this.dialogVisible = false
    },
  },
}
</script>

<style scoped>
.el-table {
  margin-top: 20px;
}
</style>
